<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" type="text/css" href="css/style5.css">
</head>
<body>
	<input type="button" name="" value="上一张" onclick="last()">
	<input type="button" name="" value="下一张" onclick="next()">
	<div id="content">
		<div id="scroll_div" class="clear">
			<img src="img/1.jpg" alt="">
			<img src="img/2.jpg" alt="">
			<img src="img/3.jpg" alt="">
		</div>
	</div>
</body>
	
	<script type="text/javascript">
		var scroll_div = document.getElementById('scroll_div');
		var image = scroll_div.getElementsByTagName('img');
		var left_trm = 0;
		var index = 0;
		function next(){
			index++;
			if (index > image.length - 1) {
				index = 0;
			}
			f(index);
		}
		function last(){
			index--;
			if (index < 0) {
				index = image.length - 1;
			}
			f(index);
		}

		function f(count){
			left_trm = -700 * count;
			scroll_div.style.left = left_trm + 'px';
		}


	</script>


</html>